<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="500"
    :before-close="handleClose"
  >
    <div>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-select
            v-model="ruleForm.menuType"
            :disabled="title === '编辑菜单'"
            placeholder="请选择"
          >
            <el-option label="目录" value="menu" />
            <el-option label="菜单" value="view" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-icon :class="squareUrl ? 'sh' : ''" class="co-e">
            <jm-imag-imp
              text="请选择图标"
              successTip="成功"
              errorTip="失败"
              url="/dataApi/upload/image"
              @success="success"
            ></jm-imag-imp
          ></el-icon>
          <el-avatar
            shape="square"
            v-if="squareUrl"
            :size="50"
            :src="squareUrl"
          />
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType === 'view'"
          label="路由Path"
          prop="address"
        >
          <el-input v-model="ruleForm.address" />
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType === 'view'"
          label="页面路径"
          prop="compent"
        >
          <el-input v-model="ruleForm.compent" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancle(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, defineEmits, computed } from 'vue'
import { addMenuApi, updataMenuApi } from '@/api/modules/menu.js'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['getCurrentMenu'])
const title = ref('新增菜单')
const dialogVisible = ref(false)
const squareUrl = ref(null)
const ruleForm = reactive({
  name: '', // 菜单名
  address: '', // 访问地址
  compent: '', // 对应的页面地址
  parentId: 0, // 父id，可选填，默认顶级节点0
  menuType: 'menu', // 菜单类型：menu，view，bottom，只能填这三个
  stat: 'ENABLE', // 状态，非必参，可选填：ENABLE启用，DISABLE禁用，默认启用
  remark: '', // 说明，非必参
  icoUrl: '',
  imgName: ''
})
const rules = computed(() => {
  const isRequired = ruleForm.menuType === 'view'
  return {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    address: [
      { required: isRequired, message: '请输入路由Path', trigger: 'blur' }
    ],
    compent: [
      { required: isRequired, message: '请输入页面路劲', trigger: 'blur' }
    ]
  }
})
const ruleFormRef = ref(null)
const submitForm = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    // ruleForm.icoUrl = squareUrl.value
    if (ruleForm.menuType === 'view' && !ruleForm.compent) {
      ElMessage.error('菜单类型URl必填!')
      return
    }
    if (valid) {
      if (title.value === '新增菜单') {
        addMenu()
        return
      }
      editMenu()
    } else {
      console.log('error submit!', fields)
    }
  })
}
const success = val => {
  console.log(val, 5555)
  squareUrl.value = val?.imgUrl
  ruleForm.icoUrl = val?.imgName
}
const addMenu = async () => {
  const { data } = await addMenuApi(ruleForm)
  emit('getCurrentMenu')
  handleCancle()
}

const editMenu = async () => {
  const { data } = await updataMenuApi(ruleForm)
  emit('getCurrentMenu')
  handleCancle()
}

const handleClose = () => {
  handleCancle()
}

const handleCancle = () => {
  ruleFormRef.value.resetFields()
  dialogVisible.value = false
}

defineExpose({
  dialogVisible,
  ruleForm,
  squareUrl,
  title
})
</script>
<style lang="scss" scoped>
.sh {
  opacity: 0;
}
.co-e {
  height: 50px;
  width: 50px;
  position: relative;
  z-index: 9;
  &:hover {
    opacity: 0.4;
    background: #fff;
  }
}
.el-avatar--square {
  position: relative;
  left: -50px;
}
</style>
